<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Artalk DEMO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; }
    body { padding:45px 10px;margin:0;background:#f4f4f4 }
    body.dark-mode { background:#000; }
    .card { margin:0 auto;max-width:700px;position:relative;overflow:hidden;background:#FFF;border-radius:4px;padding:20px;border: 1px solid transparent; }
    body.dark-mode .card { background: #1e2223;border: 1px solid #2d3235; }
    .card:not(:last-child) { margin-bottom:10px; }
    .card.billboard { text-align: center; }
    .title > a { display:block;text-decoration:none;color:#0083ff;font-size:35px;margin-top:0;margin-bottom:10px; }
    .title > a:hover { margin-left:0 }
    .title > a > span { opacity:0 }
    .title > a:hover>span { opacity:1 }
    .desc { font-size:12px;color:#757e91 }
    .social { margin-top:20px }
    .social > a:not(:last-child) { margin-right:2px }
    @media only screen and (max-width: 768px) {
      body { padding: 0;background: #FFF; }
      .card.billboard { padding-top: 20px; }
      .card { width: 100%;padding: 5px; }
    }
    .float-btn { user-select: none;bottom: 25px;display: block;cursor: pointer;text-align: center;width: 60px;height: 37px;line-height: 37px;font-size: 13px;color: #757e91;background: #fff;opacity: 0.8;border-radius: 4px;border: 1px solid #eceff2;position: fixed; }
    .to-night { z-index: 99999;left: 25px;background: #1e2223;color: #fff; }
    body.dark-mode .to-night { background: #fff;border: 1px solid #2d3235;color: #0083ff; }
    .to-top { right: 25px; }
  </style>
<link href="dist/Artalk.css?187ce44776198bffcdcb" rel="stylesheet"><script type="text/javascript" src="dist/Artalk.js?187ce44776198bffcdcb"></script></head>
<body>
  <div class="card billboard artalk-fade-in">
    <div class="title"><a href="https://github.com/ArtalkJS/Artalk" target="_blank"><span>『 </span>Artalk<span> 』</span></a></div>
    <div class="desc">一款简洁有趣的可拓展评论系统</div>
    <div class="social">
      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/v/artalk.svg?style=flat-square"></a>
      <a href="https://www.npmjs.com/package/artalk" target="_blank"><img src="https://img.shields.io/npm/dt/artalk.svg?style=flat-square"></a>
      <a href="https://github.com/ArtalkJS/Artalk/commits/master" target="_blank"><img src="https://img.shields.io/github/last-commit/ArtalkJS/Artalk?style=flat-square"></a>
      <a href="https://github.com/ArtalkJS/Artalk/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/ArtalkJS/Artalk.svg?style=flat-square"></a>
      <a href="https://github.com/ArtalkJS/Artalk" target="_blank"><img src="https://img.shields.io/github/stars/ArtalkJS/Artalk.svg?style=social"></a>
    </div>
  </div>
  <div class="card artalk-fade-in">
    <div id="comments"></div>
  </div>
  <div class="float-btn to-night artalk-fade-in">Blink</div>
  <div class="float-btn to-top artalk-fade-in" style="display: none;">TOP</div>
  <script>
    var artalk = new Artalk({
      el: '#comments',
      placeholder: '来啊，快活啊 ( ゜- ゜)',
      defaultAvatar: 'mp',
      pageKey: 'https://artalk.js.org/',
      serverUrl: (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:23366/' : 'https://qwqaq.com/Artalk/index.php',
      readMore: {
        pageSize: 15,
        autoLoad: true
      },
    })
  </script>
  <script>
    (function () {
      const toTopElem = document.querySelector('.to-top')
      toTopElem.addEventListener('click', () => {
        window.scrollTo(0, 0)
      })

      checkShowToTop()
      document.addEventListener('scroll', () => {
        checkShowToTop()
      })

      function checkShowToTop() {
        const scrollTop = window.scrollY
        const whereShow = window.screen.height
        const isNeedShow = (scrollTop > 0) && (scrollTop > whereShow)

        if (isNeedShow) {
          toTopElem.style.display = ''
        } else {
          toTopElem.style.display = 'none'
        }
      }
    })();

    (function () {
      // @Refer: https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers
      let darkMode = false

      if (getLS() == "true") {
        darkMode = true;
      } else {
        try {
          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            darkMode = true;
          }
        } catch {}
      }

      function getLS() {
        return localStorage.getItem("dark_mode_on") || null
      }

      function setLS(val) {
        return localStorage.setItem("dark_mode_on", String(val))
      }

      function checkAndApplyDarkMode () {
        artalk.ui.setDarkMode(darkMode)
        if (darkMode) {
          document.body.classList.add('dark-mode')
        } else {
          document.body.classList.remove('dark-mode')
        }
      }

      checkAndApplyDarkMode()

      const toNightElem = document.querySelector('.to-night')
      toNightElem.addEventListener('click', () => {
        darkMode = !darkMode
        setLS(darkMode)
        checkAndApplyDarkMode()
      })

      // Listen
      try {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
          const newColorScheme = e.matches ? "dark" : "light";
          if (newColorScheme == "dark") {
            darkMode = true
          } else {
            darkMode = false
          }

          checkAndApplyDarkMode()
        });
      } catch {}
    })()
  </script>
</body>
</html>
